<template>
  <view class="page-container">
    <nav-bar :title="'律师团队'"></nav-bar>
    <view :style="marginTop">
      <view class="top">
        <uni-section class="mb-10" title="专业团队" type="line">
          <template v-slot:right>
            <view class="right" @click="toMore">
              <text class="uni-body">更多</text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </template>
        </uni-section>
        <view class="uni-margin-wrap">
          <swiper
            class="swiper"
            circular
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="(item, index) in lawTeamList"
              @click="onCilckToServiceDetail(item)"
            >
              <view
                class="swiper-item"
                :style="{
                  background: 'url(' + homebg + ') no-repeat',
                  backgroundSize: '100% 100%',
                }"
              >
                <view class="avater">
                  <u-avatar :src="item.pic" size="85"></u-avatar>
                </view>
                <view class="right">
                  <view class="flex-row">
                    <text class="name">{{ item.name }}</text>
                    <text class="title">特约律师</text>
                  </view>
                  <view class="row">
                    <text>{{ item.company }}</text>
                  </view>
                  <view class="row1">
                    <text class="produce">{{ item.info }}</text>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <uni-section class="mb-10" title="法律咨询" type="line">
        <template v-slot:right>
          <view class="right" @click="toAdviceMore">
            <text class="uni-body">更多</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </template>
      </uni-section>
      <view class="consult-wrapper">
        <u-grid :border="false" col="2">
          <u-grid-item
            v-for="(item, index) in consultList"
            @click="toAdviceDetail(item)"
          >
            <view class="consult-item" style="margin-top: 0.5rem">
              <image :src="item.pic" mode="scaleToFill" class="img" />
              <text>{{ item.title }}</text>
              <text class="subtitle">{{ item.info }}</text>
              <view class="flex-row">
                <text>￥{{ item.price }}</text>
                <button class="btn">立即咨询</button>
              </view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
      <uni-section class="mb-10" title="法律服务" type="line">
        <template v-slot:right>
          <view class="right" @click="toServiceMore">
            <text class="uni-body">更多</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </template>
      </uni-section>
      <view class="consult-wrapper">
        <u-grid :border="false" col="2">
          <u-grid-item
            v-for="(item, index) in serviceList"
            @click="toServiceDetail(item)"
          >
            <view class="consult-item consult-item1" style="margin-top: 0.5rem">
              <image :src="item.pic" mode="scaleToFill" />
              <text>{{ item.title }}</text>
              <text class="subtitle">{{ item.info }}</text>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
  </view>
</template>
  <script>
import NavBar from "@/components/nav-bar.vue";
import bgBase64 from "@/static/const/bgBase64.js";
import consultAndServiceConst from "@/static/const/consultAndServiceConst";

export default {
  components: { NavBar },
  data() {
    return {
      marginTop: "",
      lawTeamList: [],
      serviceList: [],
      consultList: [],
      background: ["color1", "color2", "color3"],
      autoplay: true,
      interval: 2000,
      duration: 500,
      homebg: bgBase64.lawyerSlideBg,
      queryParams: {
        page: 1,
        size: 999,
      },
    };
  },
  onLoad(options) {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "padding-top:" + top + "px";
    this.getLawyerList();
    this.getConsultList();
    this.getServiceList();
  },

  methods: {
    /** 获取律师团队列表*/
    getLawyerList() {
      this.$store.dispatch("LawyerList", this.queryParams).then((res) => {
        this.lawTeamList = res.data.records;
        //只取lawTeamList中banner为1的数据
        this.lawTeamList = this.lawTeamList.filter((item) => {
          return item.banner == 1;
        });
      });
    },
    /** 获取咨询列表*/
    getConsultList() {
      this.$store
        .dispatch("ConsultAndServiceList", consultAndServiceConst.consult)
        .then((res) => {
          console.log(res);
          this.consultList = res.data;
          if (this.consultList.length > 8) {
            this.consultList = this.consultList.slice(0, 8);
          }
          //去除consoleList中title为更多的数据
          this.consultList = this.consultList.filter((item) => {
            return item.title != "更多";
          });
          //如果price为整数，加上.00
          this.consultList.forEach((item) => {
            if (item.price % 1 == 0) {
              item.price = item.price + ".00";
            }
          });
        });
    },
    /** 获取服务列表*/
    getServiceList() {
      this.$store
        .dispatch("ConsultAndServiceList", consultAndServiceConst.service)
        .then((res) => {
          this.serviceList = res.data;
          if (this.serviceList.length > 8) {
            this.serviceList = this.serviceList.slice(0, 8);
          }
          //去除consoleList中title为更多的数据
          this.serviceList = this.serviceList.filter((item) => {
            return item.title != "更多";
          });
        });
    },
    //跳转到律师团队详情页
    onCilckToServiceDetail(item) {
      uni.navigateTo({
        url: "/pages/law-detail/index?id=" + item.id,
      });
    },
    /** 跳转到律师团队列表页*/
    toMore() {
      uni.navigateTo({
        url: "/pages/law-list-more/index",
      });
    },
    toAdviceMore() {
      uni.navigateTo({
        url: "/pages/lawadvice-list/index",
      });
    },
    toServiceMore() {
      uni.navigateTo({
        url: "/pages/law-service/index",
      });
    },
    /** 跳转到咨询详情页*/
    toAdviceDetail(item) {
      console.log(item);
      uni.navigateTo({
        url: "/pages/telephone-consultation/index?id=" + item.id,
      });
    },
    /** 跳转到服务详情页*/
    toServiceDetail(item) {
      uni.navigateTo({
        url: "/pages/law-service-detail/index?id=" + item.id,
      });
    },
  },
};
</script>
  <style scoped lang="scss">
.page-container {
  width: 100%;
  // min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 3rem;
  .banner {
    width: 100%;
    height: 10rem;
  }
  .index-s1-consult {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20rpx;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
    .subtitle {
      font-size: 0.8rem;
      font-weight: normal;
      margin-top: 0.25rem;
    }
  }
  .law-produce-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .list {
      width: 100%;
      .item {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 20rpx;
        .item-middle {
          display: flex;
          flex-direction: column;
          flex: 1;
          .title {
            font-size: 35rpx;
            padding-left: 20rpx;
          }
        }
      }
    }
    .u-grid-item {
      margin-top: 20rpx;
    }
  }
  .mb-10 {
    .right {
      display: flex;
    }
  }
  .service-container {
    .flex-row {
      height: 1.5rem;
      background: #e43d33;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 1rem;
      margin-top: 0.5rem;
    }
    .grid-text {
      width: 100%;
      color: #fff;
    }
  }
  .consult-wrapper {
    width: 100%;
    padding-bottom: 2rem;
    .consult-item {
      width: 95%;
      display: flex;
      flex-direction: column;
      background-color: #fff;
      // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
      //   0 6px 20px 0 rgba(0, 0, 0, 0.19);
      border-radius: 10px;
      text {
        font-size: 1rem;
        font-weight: bolder;
        padding: 0.5rem;
      }
      .subtitle {
        font-size: 0.8rem;
        font-weight: normal;
        padding: 0rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .flex-row {
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
        text {
          color: #e43d33;
          font-size: 1rem;
        }
        .btn {
          font-size: 0.8rem;
          color: #f56d23;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          line-height: normal;
          background-color: rgba(0, 0, 0, 0);
          padding-left: 0.5rem;
          padding-right: 0.5rem;

          height: 1.5rem;

          &::after {
            border: 1px solid #f56d23;
          }
        }
      }
    }
    image {
      width: 100%;
      height: 5rem;
    }
    .consult-item1 {
      min-height: 11rem;
      padding-bottom: 1rem;
      box-sizing: border-box;
    }
  }
  .top {
    .uni-margin-wrap {
      padding-left: 20rpx;
      padding-right: 20rpx;
      width: 100%;
      .swiper {
        border-radius: 10px;
        overflow: hidden;
      }
      .swiper-item {
        width: 100%;
        height: 10rem;
        display: flex;
        flex-direction: row;
        padding-right: 0.5rem;
        box-sizing: border-box;
        padding-top: 1.5rem;
        .avater {
          margin-left: 1rem;
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          margin-left: 1rem;
          text {
            font-size: 0.8rem;
            color: white;
          }
          .flex-row {
            align-items: center;
            .name {
              font-size: 1rem;
              font-weight: bold;
              color: white;
            }
            .title {
              font-size: 1rem;
              color: white;
              margin-left: 0.5rem;
            }
          }
          .row {
            margin-right: 0.5rem;
          }
          .row1 {
            margin-top: 1rem;
            text {
              font-size: 0.7rem;
            }
          }
        }
      }
    }
  }
}
</style>
  